<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- <script src="./jquery-2.2.1.js"></script> -->
    <script src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/js/lib/jquery-1.10.2_d88366fd.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $("#kaiguan>button:eq(0)").addClass('xuezhong');
        var kaiguanbtn = $('#kaiguan>button')
        kaiguanbtn.click(function(argument) {

            var classname = this.id;

            $('body').removeClass().addClass(classname);
            kaiguanbtn.removeClass();
            $(this).addClass('xuezhong');
            argument.stopPropagation();

        });
        $('#kaiguan').click(function(e) {
            kaiguanbtn.toggle('fast');
        })
        kaiguanbtn.hover(function() {
            $(this).addClass('hover');
        }, function() {
            $(this).removeClass('hover');
        });

    });
    </script>
    <style type="text/css">
    body.strong {
        font-weight: 700;
    }
    
    body.zhengchang {
        font-size: 1em;
    }
    
    body.xieti {
        font-style: italic;
    }
    
    .xuezhong {
        font-weight: 700;
    }
    
    #kaiguan {
        padding: 10px;
        display: inline-block;
        background-color: #50E1CE;
    }
    
    button {
        padding: 9px;
        margin: 0, 5px;
        border-radius: 10px;
    }
    
    .hidden {
        display: none;
    }
    
    .hover {
        color: blue;
        cursor: pointer;
        background-color: #ada;
    }
    </style>
</head>

<body>
    <div id="kaiguan">
        <h3 id="h3">显示</h3>
        <button>yuan yang shi </button>
        <button id="strong">strong</button>
        <button id="xieti">xieti</button>
    </div>
    <div id="main">
        <h1>zhe shi biao ti </h1>
        <p>zhe shi di yi hang </p>
        <p>zhe shi wen zhang zhu ti </p>
    </div>
</body>

</html>
